<!DOCTYPE html>
<?php
	require_once "top.php";
?>
<html lang="en">
    <head>
    <title>FOOS CONSTRUCCIONES</title>
        <meta charset="UTF-8" />
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Foos Construcciones" />
        <meta name="keywords" content="responsive, css3, jquery, plugin, layout, web development, 3D" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        
		<link rel="stylesheet" type="text/css" href="css/style-slider.css" />
		<link rel="stylesheet" type="text/css" href="css/thumbnail_slider.css" />
		
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/proyectos.css" />
		<link href='http://fonts.googleapis.com/css?family=Advent+Pro:100,500' rel='stylesheet' type='text/css'>
		
		<!--link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell"-->
		
		<style type="text/css">
			body,td,th {
				font-family: "Open Sans Condensed", "Arial Narrow", serif;
			}
        </style>
		<script type="text/javascript" src="js/modernizr.custom.69142.js"></script> 
<noscript>
			<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
    </head>
    <body>
        <div class="container">		
			<ul id="sg-panel-container" >
				<li data-w="60" data-h="55">
					<img title="Edificios de Vivienda"  data-rotate-x="50" src="images/1.jpg" height="100%"; width="100%"/>
					<img title="Casas en Contry" src="images/2.jpg" data-rotate-y="-50" />
					<img title="Desarrollo Inmobiliario" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
					<div data-translate-z="-500" >
						<span class="titulo-oculto" style="display: none;">INICIO</span>
						<div class="sg-content">
							<h3>Foos construcciones s.a.</h3>
							<p>Bienvenido al sitio donde sus sue&ntilde;os se hacen realidad ...</p>
							<p><img src="images/foos_logo.png" width="300" height="131" alt="foos" longdesc="images/foos_logo.png"></p>
						</div>
					</div>
				</li>
				
				<li data-w="100" data-h="40">
					<div>
						<div class="sg-content sg-columns">
							<span class="titulo-oculto" style="display: none;">INSTITUCIONAL</span>
							<h3>Nuestra Trayectoria</h3>
							<p>FOOS CONSTRUCCIONES S.A. es una empresa formada por profesionales que cuentan con una amplia trayectoria en el campo de la arquitectura y construccion, comprometidos con otorgar la mejor respuesta en cada proyecto, cumpliendo con los presupuestos y tiempos pactados, satisfaciendo las necesidades y brindando un asesoramiento profesional a nuestros clientes en cada etapa de obra.</p>
							<p>En pos de ello,  contamos con el equipo para desarrollar todo tipo de obras, para lo cual sumamos a nuestro equipo de trabajo, proveedores comprometidos en la excelencia de la calidad mejorando costos, tiempos, respuestas constructivas  y atenci�n a los detalles.</p>
                            <p>En FOOS CONSTRUCCIONES S.A. estamos convencidos que una estrecha relacion y atencion a nuestros clientes, es lo que permite una evolucion permanente.
Valoramos la atencion personalizada, confiamos en nuestro trabajo, y generamos relaciones a largo plazo.</p>
							<p>Contar con FOOS CONSTRUCCIONES S.A. en la concrecion de sus proyectos es contar, ademas de un buen servicio, con la honestidad tecnica y comercial de la gente que conforma nuestra firma.</p>
						</div>
					</div>
					<img title="Conjunto de Viviendas" src="images/5.jpg" data-rotate-y="-50" />
				</li>
				
				<li data-w="50" data-h="50">
					<img title="Arquitectura Comercial" src="images/9.jpg" width="100%"  height="100%" data-translate-z="250" data-rotate-x="50"/>
					<img title="Casas" src="images/11.jpg" data-translate-z="250" />
					<img title="Viviendas" src="images/12.jpg" data-translate-z="250" />
					<img title="Proyectos Personalizados" src="images/4.jpg" data-translate-z="250" />
				</li>
				
				<li data-w="35" data-h="65">
									<div data-translate-x="-300">
										<div class="sg-content">
												<h3>Formulario de Contacto</h3>
												<p>Complete los siguientes datos, en breve nos pondremos en contacto con Ud.</p>
												<form class="formContactenos" action="envioEMail.php" method="post" id="formulario" name="formulario">
													<div class="campo">
														<div>
															<input type="text" name="nombre" id="nombre" tabindex="2" placeholder="Nombre" required>
														</div>
													</div>

													<div class="campo">
														<div>
															<input type="email" name="email" id="email" tabindex="2" placeholder="E-mail" required>
														</div>
													</div>

													<div class="campo">
														<div>
															<input type="text" name="telefono" id="telefono" tabindex="2" placeholder="Telefono" required>
														</div>
													</div>

													<div class="campo">
														<div>
															<textarea  type="text" class="comentario-email" name="comentarios" id="comentarios" placeholder="Comentarios" required></textarea>
														</div>
														<div id="resultado" style='border:0px;font-size:8px' class="campo"></div>

														<?php include_once 'js/validacion.js.php';?>	
														<button type="button" class="enviarbtn" onClick="enviar_correo();">ENVIAR</button>

													</div>

												</form>
										  </div>
										
										<span class="titulo-oculto" style="display: none;">CONTACTO</span>
									</div>
									<img title="Obras en Ejecucion" src="images/13.jpg" data-translate-y="300"/>
									<img title="Unifamiliar" src="images/8.jpg" data-translate-y="300"/>
									<img title="Conjuntos de Viviendas" src="images/10.jpg" data-translate-x="300"/>
				</li>
								
			</ul>
			
			<!-- Codrops links -->	
			<span class="codrops-demo-link" style="font-size:10px;font-family:arial">
					<strong>FOOS CONSTRUCCIONES </strong>S.A.
			</span>
			<span class="codrops-demo-link right" style="font-size:9px;font-family:arial">
					<strong>Pujol 1405, Ciudad de BS. AS.</strong>
			</span>
			
			<span id="tituloPortfolio" class="titulo-oculto portfolio" style="display: none;">PORTFOLIO</span>
			
			<div class="menu-portfolio">
				<div class="menu-portfolio-opciones" style="display: none;">
					<div class="portfolio-opciones-div"><ul class="dropdown">
					
						<!-- PARTE DINAMICA -->
						<?php
							//global $db;
							
							$sqlCategorias = "SELECT cat.id as id, cat.nombre as nombre".
												" FROM ".TABLE_CATEGORIAS." as cat".
												" WHERE cat.id_categoria_padre is not null".
												" ORDER BY cat.orden";
							
							$rows = $db->query($sqlCategorias);
							
							if ($rows) {
								while ($record = $db->fetch_array($rows)) {
									echo "<li><a href='#' onClick='cargarProyectos(".$record["id"].", \"".$record["nombre"]."\");'>".$record["nombre"]."</a></li>";
								}
							}
						
						?>
						
						<!--<li><a href="#" onClick="cargarProyectos(123, 'a');">CASAS</a></li>-->
						<!--<li><a href="#" onClick="cargarProyectos(124, 'a');">EDIFICIOS</a></li>-->
						<!--<li><a href="#" onClick="cargarProyectos(125, 'a');">LOCALES</a></li>-->
						<!--<li><a href="#" onClick="cargarProyectos(126, 'a');">GALPONES</a></li>-->
						
					</ul></div>
					<div class="piquitoPortfolio" >&nbsp;</div>
				</div>
			</div>
		</div>
		
		
		<div id="modal-div">&nbsp;</div>
		
		<div id="popupImagenes">
			<p>.</p>
			<!-- PARTE DINAMICA -->
			
		</div>
		
		<!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script-->
		<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
		<script type="text/javascript" src="js/jquery.transit.min.js"></script>
		<script type="text/javascript" src="js/jquery.imagesloaded.js"></script>
		<script type="text/javascript" src="js/jquery.ba-dotimeout.min.js"></script>
		<script type="text/javascript" src="js/jquery.gridgallery.js"></script>
		<script type="text/javascript">
			
			$(window).load(function(){
			    $("#resultado").hide();
			
				$( '#sg-panel-container' ).gridgallery();
			
				function $centrarMenuDesplegablePortfolio() {
					
					if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
						$(".menu-portfolio").css("width", "180px");
					}
					
					$(".menu-portfolio").css("z-index", "1");
					$(".menu-portfolio-opciones").show();
					var widthPortfolio = $(".menu-portfolio").innerWidth();
					$(".menu-portfolio-opciones").hide();
					$(".menu-portfolio").css("z-index", "6900");
					
					$(".menu-portfolio").css("margin-left", "-" + ((widthPortfolio-70)/2) + "px");
					
				}
					
				//este time out es para darle tiempo a cargar el gridgallery
				setTimeout( function() {
					
					$centrarMenuDesplegablePortfolio();
					
					$(".menu-portfolio-opciones").css("opacity", 0);
					
					$(".portfolio, ul.dropdown, ul.dropdown li").click(function() {
						if ($(".menu-portfolio-opciones").is(':visible')) {
							$(".menu-portfolio-opciones").animate({
								  opacity: 0
								}, 400,
								function() {
									$(".menu-portfolio-opciones").hide();
								});
						} else {
							$(".menu-portfolio-opciones").show();
							$(".menu-portfolio-opciones").animate({
							  opacity: 1
							}, 400,
							function() {
								timemenu = setTimeout(function() {
									$(".menu-portfolio-opciones").animate({
									  opacity: 0
									}, 400,
									function() {
										$(".menu-portfolio-opciones").hide();
									});
								}, 10000);
							});
						}
						//$(".menu-portfolio-opciones").toggle( "blind", {}, 400 );
					});
					
					$(".sg-dot").not(".portfolio").click(function() {
						if ($(this).attr("class") != "sg-dot portfolio") {
							$(".menu-portfolio-opciones").animate({
								  opacity: 0
								}, 400,
								function() {
									$(".menu-portfolio-opciones").hide();
									$cerrarPopup();
								});
						}
					});
	
				}, 1000);
				
			});
			
			function cargarProyectos(idCategoria, nombreCategoria) {
				
				nombreCategoria = nombreCategoria.replace(" ","_");
				
				//cargar dinamicamente las imagenes
				$.ajax({
					url: "proyectos.php",
					type: "POST",
					data: { 'idCategoria': idCategoria, 'nombreCategoria': nombreCategoria },
					dataType: "html",
					success: function(result) {
						$('#popupImagenes').html(result); 
					}
				});
				
				$abrirProyectos();
				//$(".menu-portfolio-opciones").hide();
			}
			
			function $abrirProyectos() {
				$("#modal-div").show();
				$('#popupImagenes').show();
			}
			
			function $cerrarPopup() {
				$('#popupImagenes').hide();
				$("#modal-div").hide();
			}
		</script>
    </body>
</html>